<html>
<head>
    <meta charset="utf-8">
    <!-- 3rd party libraries -->
    <script src="/static/3rdparty/jquery-3.3.1.min.js"></script>
    <script src="/static/3rdparty/tf.min27.js"></script>
    <script src="/static/3rdparty/moment.min.js"></script>
    <script src="/static/3rdparty/popper.min.js"></script>
    <script src="/static/3rdparty/stats.js"></script>
    <script src="/static/3rdparty/dat.gui.min.js"></script>
    <script src="/static/3rdparty/jquery-ui-1.12.1/jquery-ui.min.js"></script>
    <script src="/static/3rdparty/bootstrap-4.3.1/js/bootstrap.min.js"></script>
    <script src="/static/3rdparty/three.js-r103/three.min.js"></script>
    <script src="/static/3rdparty/three.js-r103/LoaderSupport.js"></script>
    <script src="/static/3rdparty/three.js-r103/MTLLoader.js"></script>
    <script src="/static/3rdparty/three.js-r103/OBJLoader2.js"></script>
    <script src="/static/3rdparty/three.js-r103/TGALoader.js"></script>
    <script src="/static/3rdparty/three.js-r103/OrbitControls.js"></script>
    <script src="/static/3rdparty/threex.windowresize.js"></script>
    <script src="/static/3rdparty/radial.js"></script>
    <script src="/static/3rdparty/recorder.js"></script>
    <link rel="stylesheet" href="/static/3rdparty/jquery-ui-1.12.1/jquery-ui.min.css"/>
    <link rel="stylesheet" href="/static/3rdparty/bootstrap-4.3.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/static/3rdparty/bootstrap/bootstrap-glyphicons.css">
    <!-- our code -->
    <link rel="stylesheet" href="/static/css/index.css"/>
    <script src="/static/js/SceneManager.js"></script>
    <script src="/static/js/drawcanvas.js"></script>
    <script src="/static/js/render.js"></script>
    <script src="/static/js/radial.js"></script>
    <script src="/static/js/orth.js"></script>
    <script src="/static/js/QE.js"></script>
    <script src="/static/js/ai.js"></script>
    <script src="/static/js/search.js"></script>
    <script src="/static/js/MageAdd.js"></script>
    <script src="/static/js/sk.js"></script>
    <script src="/static/js/audio_recording.js"></script>
    <script>
        //Global state & variables! Careful!
        var ALL_SCENE_READY = false;
        var On_MOVE = false;
        var On_ROTATE = false;
        var On_LIFT = false;
        var On_ADD = false;
        var On_SCALE = false;
        var On_xSCALE = false;
        var On_ySCALE = false;
        var On_zSCALE = false;
        var On_Orth_MOVE = false;
        var isToggle = false;
        var Auto_Insert_Mode = false;
        var Auto_Rec_Mode = false;
        var AUXILIARY_MODE = false;
        const AUXILIARY_NAME = 'auxiliaryObject'; 
        const INSERT_NAME = 'INSERT_ON_ADD'
        var INTERSECT_OBJ;
        var INSERT_OBJ;

        //Global variables, will be initialize only once.
        var manager;
        var menu;
        var radial;
        var radial_scale; 
        var renderer;
        var camera;
        var scene;
        var orbitControls;

        var mouse = new THREE.Vector2();
        var orthmouse = new THREE.Vector2();
        var raycaster = new THREE.Raycaster();
        var scenecanvas;
        var orthcanvas;
        var drawingCanvas;
        var catalogItems;
        var paint = false;
        var drawStartPos = new THREE.Vector2();
        var searchResults;
        var currentRoomId;
        var orthline;

        var skyBox;
        var lx_level;
        var lz_level;
        var renderTime = 0.6; 
        var axis; 

        var latent_space_mode;

        var stats;
        var datgui; 
        var datgui_intersectfolder; 

        $(document).ready(function () {
            latent_space_mode = false;
            manager = new SceneController($("#ui")[0]);
            renderer = manager.renderManager.renderer;
            camera = manager.renderManager.camera;
            scene = manager.renderManager.scene;

            scenecanvas = document.getElementById('scenecanvas');
            orthcanvas = document.getElementById('orthcanvas');
            catalogItems = document.getElementById("catalogItems");
            drawingCanvas = document.getElementById('drawing-canvas');
            setting_up();
        })

    </script>
</head>
<body>
<div id="ui">
    <nav id="menubar" class="navbar navbar-expand-lg navbar-light bg-light" style="overflow: visible;">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand">Dev. Shao-Kui. zhangsk18@mails.tsinghua.edu.cn</a>
            </div>
            <div class="nav navbar-nav" style="width:85%; float:right; display:inline-block;">
                <button id="load_button" type="button" class="btn btn-lg btn-primary nav_sk_button">Load</button>
                <button id="tbd_button_1" type="button" class="btn btn-lg btn-primary nav_sk_button" 
                style="">(TBD)</button>
                <button id="auxiliary_button" type="button" class="btn btn-lg btn-primary nav_sk_button"
                style="width: 9%">AuxiliaryMode
                </button>
                <button id="layout2_button" type="button" class="btn btn-lg btn-primary nav_sk_button">layout2</button>
                <button id="sklayout" type="button" class="btn btn-lg btn-primary nav_sk_button">Layout1</button>
                <button id="download_button" type="button" class="btn btn-lg btn-primary nav_sk_button">Save</button>
                <button id="screenshot" type="button" class="btn btn-lg btn-primary nav_sk_button">Render</button>
                <button id="axis_button" type="button" class="btn btn-lg btn-primary nav_sk_button">Axis</button>
                <div class="btn-group" style="float:right;width: 4%;">
                    <button type="button" id="utils_button" class="btn btn-lg btn-primary nav_sk_button dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Utils<span class="caret"></span></button>
                    <ul class="dropdown-menu" style="text-align: center;">
                        <button type="button" id="windoor_button"
                        class="btn btn-primary nav_sk_button" style="display: inline-block;width: 90%;margin-right: 5%;margin-bottom: 5px;">
                            WinDoor</button>
                        <button type="button" id="clear_button"
                        class="btn btn-primary nav_sk_button" style="display: inline-block;width: 90%;margin-right: 5%;margin-bottom: 5px;">
                            Clear</button>
                        <button type="button" id="clearALL_button"
                        class="btn btn-primary nav_sk_button" style="display: inline-block;width: 90%;margin-right: 5%;margin-bottom: 5px;">
                            ClearALL</button>
                    </ul>
                </div>
                <a id="downloadAnchorElem" style="display:none"></a>
            </div>
        </div>
    </nav>

    <div id="uibody">
        <div id="retrieve" align="center">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">3D Scene Platform</h4>
            </div>
            <table class="table">
                <tbody>
                    <tr>
                        <th scope="row">Level</th>
                        <td colspan="3" id="tab_origin"> </td>
                    </tr>
                    <tr>
                        <th scope="row">Room ID</th>
                        <td id="tab_roomid"></td>
                        <th>Room Type</th>
                        <td id="tab_roomtype"></td>
                    </tr>
                    <tr>
                        <th scope="row">Model ID</th>
                        <td id="tab_modelid"> </td>
                        <th>Category</th>
                        <td id="tab_category"> </td>
                    </tr>
                    <tr>
                        <th scope="row">AuxObj</th>
                        <td colspan="3" id="tab_auxobj"> </td>
                    </tr>
                    <tr>
                        <th scope="row">AuxDom</th>
                        <td colspan="3" id="tab_auxdom">ALL</td>
                    </tr>
                    <tr>
                        <th scope="row">FPSavg</th>
                        <td id="tab_FPSavg"> </td>
                        <th>Min-Max</th>
                        <td id="tab_minmax"> </td>
                    </tr>
                </tbody>
            </table>
            <!--div class="card-body">
                <button id="text_button" type="button" class="btn btn-lg btn-primary" style="width:32.5%;">Text</button>
                <button id="sketch_button" type="button" class="btn btn-lg btn-primary" style="width:32.5%;">Sketch
                </button>
                <button id="rec_button" type="button" class="btn btn-lg btn-primary" style="width:32.5%;">Rec</button>
                <div style="margin-top: 10px" id="record_panel">
                    <button id="start_record_button" type="button" onclick="start_reco()" class="btn btn-lg btn-primary"
                            style="width:49%;">Start
                        Recording
                    </button>
                    <button id="stop_record_button" type="button" onclick="stop_reco()" class="btn btn-lg btn-primary"
                            style="width:49%; background-color: red; display: none">Stop
                        Recording
                    </button>
                    <button id="submit_record_button" type="button" onclick="get_audio()" class="btn btn-lg btn-primary"
                            style="width:49%;">Submit
                        Recording
                    </button>
                    <div id="audio_error" class="alert alert-danger" style="display: none; margin-top: 10px">Error!
                    </div>
                    <div id="audio_processing" class="alert alert-info" style="display: none; margin-top: 10px">Audio
                        Processing ...
                    </div>
                    <div id="audio_ok" class="alert alert-success" style="display: none; margin-top: 10px">Success!
                    </div>
                </div>
                <button id="colla_button" type="button" class="btn btn-lg btn-primary"
                        style="margin-top: 10px; width:100%;">
                    Collaborative Search
                </button>
            </div-->
            <div>
                <button id="" type="button" class="btn btn-lg btn-primary rapidSearch" style="width:18%;margin-bottom: 3px;">双人床</button>
                <button id="" type="button" class="btn btn-lg btn-primary rapidSearch" style="width:18%;margin-bottom: 3px;">茶几</button>
                <button id="" type="button" class="btn btn-lg btn-primary rapidSearch" style="width:18%;margin-bottom: 3px;">餐桌</button>
                <button id="" type="button" class="btn btn-lg btn-primary rapidSearch" style="width:18%;margin-bottom: 3px;">小圆桌</button>
                <button id="" type="button" class="btn btn-lg btn-primary rapidSearch" style="width:18%;margin-bottom: 3px;">梳妆台</button>
                <button id="" type="button" class="btn btn-lg btn-primary rapidSearch" style="width:18%;margin-bottom: 3px;">衣柜</button>
                <button id="" type="button" class="btn btn-lg btn-primary rapidSearch" style="width:18%;margin-bottom: 3px;">电视柜</button>
                <button id="" type="button" class="btn btn-lg btn-primary rapidSearch" style="width:18%;margin-bottom: 3px;">沙发</button>
                <button id="" type="button" class="btn btn-lg btn-primary rapidSearch" style="width:18%;margin-bottom: 3px;">椅子</button>
                <button id="" type="button" class="btn btn-lg btn-primary rapidSearch" style="width:18%;margin-bottom: 3px;">储物柜</button>
            </div>
            <div id="collaborative_container">
                <!--canvas id="drawing-canvas" height="224" width="224"></canvas>
                <div id="sketchsearchdiv" class="form-inline mt-2 mt-md-0"
                     style="width:100%; padding-top: 10px; padding-bottom: 10px; display:flex; width:100%; flex-direction:row;">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="sketchsearchbtn"
                            style="overflow: hidden; display:block; padding-top: 5px; padding-bottom: 5px; flex-grow:1;">
                        Sketch Search
                    </button>
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="sketchclearbtn"
                            style="overflow: hidden; display:block; padding-top: 5px; padding-bottom: 5px; flex-grow:1;">
                        Sketch Clear
                    </button>
                </div-->
                <div class="form-inline mt-2 mt-md-0" style="width:100%; padding-top: 10px; padding-bottom: 10px;">
                    <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"
                           style="width:75%;margin-left:5%;" id="searchinput">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="searchbtn">Search</button>
                </div>
            </div>
            <div id="rec_container" style="display: none;">
            </div>
            <div id="catalogItems" class="catalogSectionContent" align="center"></div>
        </div>

        <div id="scene">
            <canvas id="scenecanvas"></canvas>
            <canvas id="orthcanvas"></canvas>
        </div>
    </div>

    <div id="load_dialog" class="dialog" title="Load Scene File">
        <div class="form-group">
            <label for="load_dialog_input">LoadFile</label>
            <input type="file" class="form-control-file" id="load_dialog_input">
        </div>
        <button type="button" class="btn btn-primary" id="load_dialog_button">载入</button>
    </div>


    <div id="menu2" class="radialMenu"></div>
    <div id="menu_scale" class="radialMenu"></div>
</div>
</body>
</html>

